<template>
    <div class="container">
        <h1>状态码管理</h1>
        <el-divider></el-divider>
        <div class="codeList">
            <el-table
                :data="code.filter((data)=>!search||data.tack_code.toLowerCase().includes(search.toLowerCase())).slice((currentPage - 1) * pagesize, currentPage * pagesize) "
                style="100%"
                stripe
                v-loading="loading"
            >
                >
                <el-table-column label="序号" type="index" width="150"></el-table-column>
                <el-table-column label="货架号" prop="shelves_number"></el-table-column>
                <el-table-column label="层数号" prop="shelves_layer_number"></el-table-column>
                <el-table-column label="状态码" prop="tack_code"></el-table-column>
                <el-table-column
                    label="状态"
                    prop="state"
                    width="100"
                    :filters="[{ text: '未使用', value: 0 }, { text: '已使用', value: 1 }]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end"
                >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state ===0" type="success" disable-transitions>未使用</el-tag>
                        <el-tag v-if="scope.row.state ===1" type="primary" disable-transitions>已使用</el-tag>
                        <!-- <el-tag
                            :type="scope.row.state == 0 ? 'primary' : 'success'"
                            disable-transitions
                        >{{scope.row.state}}</el-tag> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 30, 45, 60, 75]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="lenth"
                style="margin-left: 250px; margin-top: 20px"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'PickUpCode', // 数据
    data() {
        return {
            loading: false,
            code: [
                {
                    shelves_number: '',
                    shelves_layer_number: '',
                    tack_code: '',
                    state: ''
                }
            ],
            lenth: 0, //初始页
            currentPage: 1, //初始页大小
            pagesize: 10
        };
    }, // 方法
    methods: {
        getData() {
            this.loading = true;
            this.$axios({
                method: 'get',
                url: 'pickUpCode/query-all',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }).then(res => {
                if (res.data.code == 1) {
                    this.code = res.data.date;
                    this.lenth = this.code.length;
                    this.loading = false;
                }
            });
        },
        filterTag(value, row) {
            return row.state === value;
        },
        handleSizeChange(val) {
            this.pagesize = val;
        }, // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        }
    }, // 页面初始化生命周期函数
    created() {
        this.getData();
    }
};
</script>
// 样式
<style scoped>
</style>